<template>
	<div class="table-container">
		<el-table
			:data="data"
			:border="setBorder"
			v-bind="$attrs"
			:row-key="rowKey"
			stripe
			style="width: 100%;"
            :height="hasPagination?'calc(100% - 40px)':'100%'"
			v-loading="config.loading"
			@selection-change="onSelectionChange"
		>
			<!-- 默认插槽 -->
			<slot></slot>
			<el-table-column type="selection" align="center" :reserve-selection="true" width="40" v-if="config.isSelection" />
			<el-table-column type="index" align="center" label="序号" width="60" v-if="config.isSerialNo" />
			<el-table-column
				v-for="(item, index) in setHeader"
				:key="index"
				:show-overflow-tooltip="item.showTooltip"
				:prop="item.key"
				:width="item.colWidth"
				:label="item.title"
				:align="item.align"
			>
				<template v-slot="scope">
					<slot v-if="item.slot" :name="item.slot" :row="scope.row"></slot>
					<template v-else>
						{{ scope.row[item.key]? scope.row[item.key]:"--"}}
					</template>
				</template>
			</el-table-column>
			<!-- 插入表格最后一行之后的插槽 -->
			<template #append>
				<slot name="append"></slot>
			</template>
			<template #empty>
				<el-empty description="暂无数据" />
			</template>
		</el-table>
		<div v-if="hasPagination" class="table-footer mt15">
			<el-pagination
				v-model:current-page="paginationOptions.pageNum"
				v-model:page-size="paginationOptions.pageSize"
				:pager-count="5"
				:page-sizes="[20, 50, 100]"
				:total="config.total"
				layout="total, sizes, prev, pager, next, jumper"
				background
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script setup lang="ts" name="netxTable">
import { reactive, computed } from 'vue';

// 定义父组件传过来的值
const props = defineProps({
	// 列表内容
	data: {
		type: Array<EmptyObjectType>,
		default: () => [],
	},
	// 表头内容
	header: {
		type: Array<EmptyObjectType>,
		default: () => [],
	},
	// 配置项
	config: {
		type: Object,
		default: () => {},
	},
	// 行ID
	rowKey: {
		type: String,
		default: () => 'id',
	},
	// 分页条
	hasPagination: {
		type: Boolean,
		default: () => true,
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['delRow', 'pageChange', 'sortHeader']);

// 定义变量内容
/**
 * 分页模块
 **/ 
 let  paginationOptions = reactive({
    pageNum:1,
    pageSize:20
})
const state = reactive({
	selectlist: [] as EmptyObjectType[],
	checkListAll: true,
	checkListIndeterminate: false,
});

// 设置边框显示/隐藏
const setBorder = computed(() => {
	return props.config.isBorder ? true : false;
});

// 设置 tool header 数据
const setHeader = computed(() => {
	return props.header;
});

// 表格多选改变时，用于导出
const onSelectionChange = (val: EmptyObjectType[]) => {
	state.selectlist = val;
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	paginationOptions.pageSize = val;
	emit('pageChange', paginationOptions);
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	paginationOptions.pageNum = val;
	emit('pageChange', paginationOptions);
};
// 搜索时，分页还原成默认
const pageReset = () => {
	paginationOptions.pageNum = 1;
	paginationOptions.pageSize = 20;
	emit('pageChange', paginationOptions);
};

// 暴露变量
defineExpose({
	pageReset,
});
</script>

<style scoped lang="scss">
.table-container {
    height: 100%;
	display: flex;
	flex-direction: column;
	.el-table {
		flex: 1;
	}
	.table-footer {
		position: fixed;
        right: 30px;
        bottom: 20px;
        margin-top: 15px;
	}
}

</style>
